import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Edit, Trash2, ThumbsDown, MoreHorizontal, UserCheck } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";

export default function QualityIssueCard({ issue, onEdit, onDelete }) {
  return (
    <Card className="group hover:shadow-lg transition-shadow duration-300 bg-white flex flex-col">
      <CardHeader className="pb-4">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center">
              <ThumbsDown className="w-6 h-6 text-red-600" />
            </div>
            <div>
              <CardTitle 
                className="text-base font-bold text-gray-800 cursor-pointer hover:text-red-700"
                onClick={() => onEdit(issue)}
              >
                {issue.issueName || '未命名通病'}
              </CardTitle>
              {issue.category && (
                <Badge variant="outline" className="mt-1">{issue.category}</Badge>
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="opacity-0 group-hover:opacity-100 transition-opacity">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(issue)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => onDelete(issue.id)} className="text-red-600">
                <Trash2 className="w-4 h-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent className="space-y-3 flex-grow flex flex-col">
        {Array.isArray(issue.preventionMeasures) && issue.preventionMeasures.length > 0 && (
            <div className="text-sm text-gray-600 flex-grow">
                <p className="font-semibold mb-1">主要措施:</p>
                <ul className="list-disc list-inside space-y-1 pl-1">
                    {issue.preventionMeasures.slice(0, 3).map((measure, index) => (
                        <li key={index} className="truncate">{measure}</li>
                    ))}
                    {issue.preventionMeasures.length > 3 && <li className="text-xs text-gray-400">...更多</li>}
                </ul>
            </div>
        )}
        <div className="pt-2 border-t mt-auto">
            {Array.isArray(issue.responsibleRoles) && issue.responsibleRoles.length > 0 && (
                <div className="flex items-center gap-2 text-sm">
                    <UserCheck className="w-4 h-4 text-gray-500" />
                    <div className="flex flex-wrap gap-1">
                        {issue.responsibleRoles.map((role, index) => (
                            <Badge key={index} variant="secondary">{role}</Badge>
                        ))}
                    </div>
                </div>
            )}
        </div>
      </CardContent>
    </Card>
  );
}